<!--
 * @Author: 宋绍华
 * @Date: 2024-11-11 17:16:16
 * @LastEditors: 宋绍华
 * @LastEditTime: 2025-01-10 11:11:31
 * @FilePath: \sr_system_manager_ui\src\views\project\manage\noticesDetails.vue
 * @Description: 发布消息通知
-->
<template>
  <div class="publish-notices">
    <div class="publish-notices-content form-views">
      <div class="wrap">
        <div class="wrap-item">
          <div class="wrap-item__1 wrap-item__1-content">
            <span class="wrap-item__1-name border-b-0!">通知名称</span>
            <span class="wrap-item__1-val border-r-0! flex! items-center leading-[1.2] border-b-0!">
              <span>{{ form.title }}</span>
            </span>
          </div>
          <div class="wrap-item__1  wrap-item__1-content">
            <span class="wrap-item__1-name border-b-0!">项目分类</span>
            <span  class="wrap-item__1-val  flex! items-center leading-[1.2] border-b-0!">{{ form?.projectTypeName }}</span>
          </div>
        </div>
        <div class="wrap-item">
          <div class="wrap-item__1">
            <span class="wrap-item__1-name">年度</span>
            <span class="wrap-item__1-val border-b-0! border-r-0!">{{ form?.statisticsYearName }}</span>
          </div>
          <div class="wrap-item__1">
            <span class="wrap-item__1-name border-b-0!">申报时间</span>
            <span  class="wrap-item__1-val border-b-0! color-#F53F3F">{{ formatDate(form.declareStartTime).format('YYYY-MM-DD') }} ~ {{ formatDate(form.declareEndTime).format('YYYY-MM-DD') }}</span>
          </div>
        </div>
        <div class="wrap-item w-full">
          <div class="wrap-item__1 w-full!  wrap-item__1-content">
            <div class="wrap-item__1-name flex! items-center">通知内容</div>
            <div class="wrap-item__1-val w-full leading-normal pt-14px pb-14px pr-14px" v-html="form.content"></div>
          </div>
        </div>
        <div class="wrap-item w-full">
          <div class="wrap-item__1 w-full! flex  wrap-item__1-content">
            <span class="wrap-item__1-name border-t-0!  flex! items-center">通知附件</span>
            <div class="wrap-item__1-val w-full border-t-0! flex! flex-col justify-center">
              <div v-for="item in form.attachmentFileInfoDTOList" :key="item.id" @click="showFile(item)" class="file"> <el-icon mr-6px><Paperclip /></el-icon> {{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="publish-notices-btns">
      <el-button @click="linkToPage(1)" type="primary"
        v-if="from === 'notices' && currentIdentityCode === 'NORMAL'">去申报</el-button>
      <el-button @click="linkToPage(0)" v-else>关闭</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getProjectNoticesDetailsApi, } from '@/api/project';
import formatDate from '@/utils/formateDate';
const { proxy } = getCurrentInstance();
import useUserStore from '@/store/modules/user'

const route = useRoute()
const router = useRouter()
const from = ref('')

// 获取消息详情
const { run: getProjectNoticesDetails } = useRequest(getProjectNoticesDetailsApi, {
  manual: true,
  onSuccess: (response) => {
    form.value = response
  }
})
const currentIdentityCode = useUserStore().currentIdentityCode

const form = ref({
  id: undefined,
  projectTypeName: '',
  statisticsYearName: '',
  content: '',
  declareEndTime: undefined,
  declareStartTime: undefined,
  fileIds: [],
  isDirectPublish: false,
  projectType: undefined,
  statisticsYear: undefined,
  title: '',
  attachmentFileInfoDTOList: []
})

const linkToPage = (type: number = 0) => {
  if (type === 1) {
    router.push({ path: '/project/mine/create', query: { projectType: form.value.projectType, statisticsYear: form.value.statisticsYear, isProposal: true, type: 0, mode: 'create', noticesId: form.value?.id } })
  } else {
    proxy.$tab.closePage()
  }
}

const showFile = (item) => {
  proxy.$preview.open({
    src: item.url,
  })
}

onMounted(() => {
  if (route.query.id) {
    getProjectNoticesDetails({ id: route.query.id as string })
  }

  if (route.query.from) {
    from.value = route.query.from as string
  }
})
</script>

<style lang="scss" scoped>
.publish-notices {
  --at-apply: flex flex-col h-full bg-white;

  .title {
    --at-apply: text-20px font-bold border-b border-#E5E6EB py-16px pl-20px border-b-solid;
  }

  &-content {
    --at-apply: p-30px flex-1 overflow-y-auto;
  }

  &-btns {
    --at-apply: flex py-16px items-center justify-center pt-20px pb-20px;
    border-top: 1px solid #E5E6EB;
  }
}

.file {
  --at-apply: color-#57A9FB text-14px cursor-pointer mr-10px  h-30px leading-30px flex items-center;
}


.wrap {
  font-size: 14px;
  &-item {
    --at-apply: flex items-center w-full;
     &__1 {
      --at-apply: h-50px leading-50px w-50%;

      &-name {
        --at-apply: bg-#F6FAFF w-131px inline-block pl-16px;
        border: 1px solid #BEDAFF;
        border-right: none;
      }
      
      &-val {
        --at-apply: inline-block  pl-16px;
        border: 1px solid #BEDAFF;
        width: calc(100% - 131px);
      }

      &-content {
        --at-apply: min-h-50px h-auto flex;
      }
    }
  }
}
</style>